<template>
	<div class="tpl33-header"
  v-show="(tplItemData.showLocation != 2 || !tplItemData.showLocation) || (tplItemData.showSearch != 2 || !tplItemData.showSearch) || tplItemData.showStore == 1"
   :style="tplItemData.modulePadding || tplItemData.modulePadding ==0?'padding-top:'+tplItemData.modulePadding+'px;padding-bottom:'+tplItemData.modulePadding+'px;':'padding-top:5px;padding-bottom:5px;'">
    <div class="search-wrap" v-show="$route.name!='storeIndex'">
      <div v-if="tplItemData.showStore == 1" class="store-head">
        <span class="store-head-name"><i></i><span class="positioning_shop_name">{{ shopName }}</span></span>
        <span class="fr store-change">
          <span><a style="color: #4b5054" @click="JumpName('storeList')">切换门店</a></span> <i></i>
        </span>
      </div>
      <div class="search-container" v-show="(tplItemData.showLocation != 2 || !tplItemData.showLocation) || (tplItemData.showSearch != 2 || !tplItemData.showSearch)">
        <a href="javascript:;" v-show="tplItemData.showLocation !=2 || !tplItemData.showLocation" class="ico-left" @click="cityDialogVisible = true"><span>{{curCity}}</span><i></i></a>
        <div class="search-wrapper" v-show="tplItemData.showSearch != 2 || !tplItemData.showSearch">
          <div class="icon" @click="searchList">
            <!-- TODO svg换成图片 -->
            <img class="icon_search" src="https://img.wifenxiao.com/h5-wfx/images/common/search-icon.png" />
          </div>
          <input @confirm="searchList" v-model="keyword" type="text" :placeholder="tplItemData.has_duodian?'商品搜索：请输入商品、店铺名称':'商品搜索：请输入商品关键字'" />
          
        </div>
      </div>
    </div>
    <a-map ref="aMaps" @getLoaction="getLoactionFn" />
    <location-city ref="locationCity" @change="cityChangeFn" :visible.sync="cityDialogVisible"></location-city>
  </div>
</template>

<script>
  /**
   * @Author: yqe@360shop.cn
   * @Date: 2020年07月08日15:11:21
   * @Last Modified by: yqe@360shop.cn
   * @Last Modified time: 2020年07月08日15:11:21
   */
import Vue from 'vue'
import { openPage } from '@/utils/utils'
import { storeList } from '@/api/shop'

import aMap from '../../../../storeList/components/amap'
import locationCity from '@/components/locationCity'
export default Vue.extend({
    name: 'index',
    components: {
      aMap,
      locationCity
    },
    data() {
      return {
        showIndicators: true,
        autoplay: true,
        imgadvWxH: 0,
        keyword: '',
        curCity: '请选择',
        cityDialogVisible: false,
        shopName: '该地区附近暂无店铺',
        postData: {
          p: 1,
          group_id: 'no_group_id',
          latitude: '',
          longitude: ''
        },
        cityName: ''
      }
    },
    props: {
      tplItemData: {
        type: Object // 传入参数的类型
      }
    },
    methods: {
      // TODO 小程序跳转
      openLink(link) {
        openPage(link)
      },
      storeListPost() {
        const postData = Object.assign({}, this.postData, true)
        storeList(postData).then(res => {
          this.loading = false
          if (res.status == 1) {
            if (res.data.list && res.data.list.length > 0) {
              this.shopName = res.data.list[0].shop_name
            }
          }
        })
      },
      /**
       * 链接跳转
       */
      JumpName(url, data) {
        this.$JumpName(this, url, data)
      },
      searchList() {
        this.$JumpName(this, 'item-list', { title: this.keyword })
      },
      // 地图获取定位
      getLoactionFn(val) {
        this.curCity = val.address_component.district
        
        this.$refs.locationCity.curCity = this.curCity
        this.postData.latitude = val.location.lat
        this.postData.longitude = val.location.lng
        // this.cityName=val.addressComponents.district+val.addressComponents.
        // TODO 小程序定位处理
        const _address = val.address_component
        if (_address.district) {
          const _city = _address.city ? (_address.city + ',') : ''
          const _province = _address.province ? (_address.province + ',') : ''
          const _country = _address.country ? (_address.country + ',') : ''
          this.cityName = _address.district + ',' + _city +  _province +  _country
        }
        // } else {
        //   if (val.addressComponents.district) {
        //     this.cityName += val.addressComponents.district + ','
        //   }
        //   if (val.addressComponents.city) {
        //     this.cityName += val.addressComponents.city + ','
        //   }
        //   if (val.addressComponents.province) {
        //     this.cityName += val.addressComponents.province + ','
        //   }
        //   if (val.addressComponents.country) {
        //     this.cityName += val.addressComponents.country
        //   }
        // }
        
        // console.log(this.cityName, '123444555')
        this.$emit('getcityName', this.cityName)
        this.$emit('getLocationType', 0)
        this.storeListPost()
        this.$emit('getLoaction', { lat: val.location.lat, lng: val.location.lng })
      },
      // 选择了城市之后抛出的城市id
      cityChangeFn(val) {
        this.curCity = val.cityName
        if (val.type == 1) {
          this.$emit('getcityName', val.cityName)
          this.$emit('getLocationType', 1)
        } else {
          this.$emit('getcityName', val.cityCode)
          this.$emit('getLocationType', 0)
        }
      }
    },
    created() {
      
    }
  })
</script>

<style lang='scss'>
 @import "src/styles/mixin";
.tpl33-header{
  position: relative;
  .search-wrap{
    width: 100%;
    background-color: #fff;
    text-align: center;
    padding: 10px 0;
  }
  .store-head{
    padding: 10px 0 20px;
    text-align: left;
    margin-left: 3.125%;
    margin-right: 3.125%;
    &-name{
      i{
        vertical-align: top;
        display: inline-block;
        width: 40px;
        height: 40px;
        background: url(https://img.wifenxiao.com/h5-wfx/images/diy/tpl42/addr_icon.png) center no-repeat;
        background-size: 100% auto;
      }
      span{
        height: 40px;
        line-height: 40px;
        display: inline-block;
        color: #666;
      }
    }
    .store-change{
      span{
        line-height: 40px;
        height: 40px;
        display: inline-block;
        color: #333;
      }
      i{
        width: 14px;
        height: 24px;
        display: inline-block;
        background: url(https://img.wifenxiao.com/h5-wfx/images/diy/tpl42/arrow_visitor.png) center no-repeat;
        background-size: 100% auto;
        vertical-align: -4px;
      }
    }
  }
  .search-container{
    width: 100%;
    display: flex;
    box-sizing: border-box;
    padding-right: 16px;
    .ico-left{
      text-align: center;
      color: #909090;
      padding: 0 8px 0 16px;
      font-size: 26px;
      width: 136px;
      display: flex;
      align-items: center;
      position: relative;
      height: 60px;
      line-height: 60px;
      span {
        display: inline-block;
        width: 78px;
        max-height: 60px;
        overflow: hidden;
      }
      i {
        display: inline-block;
        height: 12px;
        width: 22px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        margin-left: 10px;
        background-image: url('https://img.wifenxiao.com/h5-wfx/images/diy/down.png');
        vertical-align: 0;
        height: 60px;
      }
    }
    .search-wrapper{
      position:relative;
      width: 90%;
      margin: 0 auto;
      height: 60px;
      border-radius: 30px;
      border: 1px solid #FAFAFA;
      background: #FAFAFA;
      display: flex;
      align-items: center;
      padding: 0 20px;
      .icon {
        color:#999999;
        font-size: 24px;
        margin-right: 10px;
        .icon_search{
          width:32px;
          height:32px;
        }
      }
      @include placeColor(#999);
      input {
        display: inline-block;
        width:100%;
        height: 60px;
        border:0;
        background: transparent;
        box-sizing: border-box;
      }
    }
  }
  
}

</style>
